<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>超级管理员确认后，进行募捐单的封禁</title>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../element/index.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="../../css/table.css">

<body>
    <div id="app">
        <!-- 搜索区域 -->
        <el-row style="color: #B8860B;">
            <el-col :span="6">
            最小年龄: <el-input-number v-model.number="minAge" :min="0" :max="150" label="最小年龄" controls-position="right"
                placeholder="请输入最小年龄"></el-input-number>
        </el-col>
        <el-col :span="6">
            最大年龄: <el-input-number v-model.number="maxAge" :min="0" :max="150" label="最大年龄" controls-position="right"
                placeholder="请输入最大年龄"></el-input-number>
        </el-col>
        <el-col :span="6">
            <el-input v-model="name" placeholder="对原因和名字进行检索" style="color: #B8860B;"></el-input>
        </el-col>
        <el-col :span="6">
            <el-button @click="searchReports" type="primary">搜索</el-button>

        </el-col>



        <!-- 举报案例表格 -->
        <el-table :data="reportList" class="zebra-table" style="width: 100%" row-key="reportId">
            <el-table-column prop="donationId" label="募捐单ID"></el-table-column>
            <el-table-column label="举报对象" prop="donationImage">
                <template slot-scope="scope">
                    <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                    <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
            </el-table-column>
            <el-table-column prop="donationReason" label="原因"></el-table-column>
            <el-table-column prop="deadline" label="截止时间"></el-table-column>
            <el-table-column prop="donationAmount" label="募捐目标金额"></el-table-column>
            <el-table-column prop="donatedAmount" label="已募捐金额"></el-table-column>
            <el-table-column prop="materialPoints" label="救助积分"></el-table-column>
            <el-table-column prop="reportId" label="举报单号">
                <template slot-scope="scope">
                  <span :style="{ color: '#B8860B' }">{{ scope.row.reportId }}</span>
                </template>
              </el-table-column>              
            <el-table-column prop="reportReason" label="举报原因"></el-table-column>
            <el-table-column prop="reportReasonInfo" label="举报原因"></el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column prop="status" label="举报状态"></el-table-column>
            <el-table-column label="操作" fixed="right" width="300px">
  
                <template slot-scope="scope">
                    <div class="btn-group" style="display: flex; justify-content: space-between;"> 

                        <el-button type="primary" @click="downloadReport(scope.row.reportId)" style="margin-bottom: 10px;">下载报告</el-button>
                        <el-button type="info" @click="changeReportStatus(scope.row.reportId, scope.row.status)" v-if="scope.row.status === '待处理'" style="margin-bottom: 10px;">切换状态</el-button>
                        <el-button type="info" @click="changeReportStatus(scope.row.reportId, scope.row.status)" v-if="scope.row.status === '已处理'" style="margin-bottom: 10px;">切换状态</el-button>
                        <el-button type="warning" @click="refundAmount(scope.row)" v-if="scope.row.status === '已处理'" style="margin-bottom: 10px;">退回款项</el-button>
                </div>
                </template>
            </el-table-column>
        </el-table>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchStatus: '查看待处理',
                name: '',
                minAge: '',
                maxAge: '150',
                reportList: [],
                currentRefund: {},
                currentRefundAmount: 0
            },
            created() {
                this.searchReports();
            },
            methods: {
                searchReports() {
                    axios.get('http://localhost:8888/api/report/reportDonationList', {
                        params: {
                            minAge: this.minAge,
                            maxAge: this.maxAge,
                            name: this.name,
                        }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.reportList = response.data.data;
                            this.calculateCompletion()
                        } else {
                            this.reportList = [];
                        }
                    }).catch(error => {
                        console.error('搜索失败:', error);
                    });
                },
                downloadReport(reportId) {
                    fetch(`localhost:8888/api/report/download?reportId=${reportId}`)
                        .then(response => response.blob())
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', 'dontionFile.pdf');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        })
                        .catch(error => {
                            alert("文件不存在");
                            console.error('Error downloading file:', error);
                            // 处理下载失败的情况
                        });
                },
                changeReportStatus(reportId, newStatus) {
                    // 修改举报状态的逻辑
                    let url = newStatus === '处理中' ? 'http://localhost:8888/api/report/changeStateByAdmin' : 'http://localhost:8888/api/report/changeStateBySuperAdmin';
                    axios.post(url, null, {
                        params: {
                            reportId: reportId
                        }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.searchReports();
                            this.$message.success('状态更新成功');
                        } else {
                            this.$message.error('状态更新失败: ' + response.data.message);
                        }
                    }).catch(error => {
                        this.$message.error('状态更新失败: ' + error);
                    });
                },
                showRefundDialog(report) {
                    this.currentRefund = report;
                    this.currentRefundAmount = report.donatedAmount - report.expenseAmount;
                    this.refundDialogVisible = true;
                },
                
                refundAmount(row) {
                    axios.post('http://localhost:8888/api/money/donationRefund', {
                        donationId: row.donationId,

                    }).then(response => {
                        // 处理退款成功逻辑
                        this.refundDialogVisible = false;
                        this.searchReports(); // 重新加载数据
                        this.$message.success(response.data.message);
                    }).catch(error => {
                        console.error('款项退回失败:', error);
                        this.refundDialogVisible = false;
                    });
                },
                cancelRefund() {
                    this.refundDialogVisible = false;
                },
                calculateCompletion() {
                    this.reportList.forEach(item => {
                        // 截取日期部分，只保留年月日
                        item.deadline = item.deadline.substring(0, 10);
                    });
            },
            },
        });
    </script>
</body>

</html>